<template>
  <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="800px" @open="handleDialogOpen()"
    v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form :model="exerciseModel" :rules="dialogProps.action === 'add' ? addExercise : editExercise"
      ref="exerciseForm" label-width="80px" label-position="right" size="small">
      <el-tabs type="border-card" v-model="activeTabName">
        <el-tab-pane name="exerciseInfoTab" label="基本信息" class="exercise-info-tab-pane">
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="pname">
                <el-input ref="pname" :maxlength="50" v-model="exerciseModel.pname" autofocus></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运动强度" prop="exerciseIntensity">
                <el-input :maxlength="50" v-model="exerciseModel.exerciseIntensity"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="运动时间" prop="runDuration">
                <el-input :maxlength="50" v-model="exerciseModel.runDuration"
                  oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="适用性别" prop="applyGender">
                <el-select class="parent-select" v-model="exerciseModel.applyGender" placeholder="请选择">
                  <el-option v-for="item in optionSex" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="年龄下限" prop="ageLimit">
                <el-input :maxlength="50" v-model="exerciseModel.ageLimit">></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄上限" prop="upperAgeLimit">
                <el-input :maxlength="50" v-model="exerciseModel.upperAgeLimit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="千步当量" prop="equivalent">
                <el-input :maxlength="50" v-model="exerciseModel.equivalent"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拉伸部位" prop="tensileParts">
                <el-select class="parent-select" v-model="exerciseModel.tensileParts" placeholder="请选择">
                  <el-option v-for="item in optionTP" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="动作方法">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="exerciseModel.actionMethod">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注意事项">
                <el-input class="properties-textarea" type="textarea" :rows="3" v-model="exerciseModel.announcements">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('exerciseForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { saveExercise, updateExercise } from '@/api/Lixueseng520/exercise'

  export default {
    name: 'exercise-edit',
    data() {
      return {
        loading: true,
        optionSex: [
          { value: '男', label: '男' },
          { value: '女', label: '女' }
        ],
        optionTP: [
          { value: '上肢', label: '上肢' },
          { value: '下肢', label: '下肢' },
          { value: '腰背', label: '腰背' }
        ],
        exerciseModel: {
          id: 0,
          encode: '',
          pname: '',
          exerciseIntensity: '',
          equivalent: '',
          runDuration: '',
          ageLimit: '',
          upperAgeLimit: '',
          applyGender: '',
          tensileParts: '',
          actionMethod: '',
          announcements: ''
        },
        dialogProps: {
          visible: false,
          action: '',
          title: ''
        },
        activeTabName: 'exerciseInfoTab',
        addExercise: {
          pname: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ],
          applyGender: [
            { required: true, message: '请输入性别', trigger: 'change' }
          ],
          ageLimit: [
            { required: true, message: '年龄必须为数字值', trigger: 'blur' },
            { pattern: /^(1|[1-9]\d?|)$/, message: '范围在1-100', trigger: 'blur' }
          ],
          upperAgeLimit: [
            { required: true, message: '年龄必须为数字值', trigger: 'blur' },
            { pattern: /^(1|[1-9]\d?|)$/, message: '范围在1-100', trigger: 'blur' }
          ],
          tensileParts: [
            { required: true, message: '请输入拉伸部位', trigger: 'change' }
          ]
        },
        editExercise: {
          pname: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
            { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
          ],  
          ageLimit: [
            { required: true, message: '年龄必须为数字值', trigger: 'blur' },
            { pattern: /^(1|[1-9]\d?|)$/, message: '范围在1-100', trigger: 'blur' }
          ],
          upperAgeLimit: [
            { required: true, message: '年龄必须为数字值', trigger: 'blur' },
            { pattern: /^(1|[1-9]\d?|)$/, message: '范围在1-100', trigger: 'blur' }
          ]
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.dialogProps.action === 'add') {
              this.doSaveExercise()
            } else {
              this.doUpdateExercise()
            }
          } else {
            return false
          }
        })
      },
      doUpdateExercise() {
        this.loading = true
        updateExercise(this.exerciseModel.id, this.exerciseModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.loading = false
            this.outputError(error)
          })
      },
      doSaveExercise() {
        this.loading = true
        saveExercise(this.exerciseModel)
          .then(response => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.loading = false
            this.dialogProps.visible = false
            this.$emit('save-finished')
          })
          .catch(error => {
            this.outputError(error)
          })
      },

      handleDialogClose() {
        this.dialogProps.visible = false
      },
      handleDialogOpen() {
        this.$nextTick(() => {
          this.$refs['exerciseForm'].clearValidate()
          this.$refs['pname'].focus()
        })
      },
      outputError(error) {
        console.log(error.response ? error.response : error.message)
        this.loading = false
        this.$message({
          showClose: true,
          message: '出错了，请按F12查看浏览器日志。',
          type: 'error'
        })
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        this.$on('openEditUserDialog', function (exercise) {
          this.exerciseModel = exercise
          this.dialogProps.action = 'edit'
          this.dialogProps.title = '编辑'
          this.activeTabName = 'exerciseInfoTab'
          this.dialogProps.visible = true
        })
        this.$on('openAddUserDialog', function () {
          this.exerciseModel = {
            roleIds: []
          }
          this.dialogProps.action = 'add'
          this.dialogProps.title = '新增'
          this.activeTabName = 'exerciseInfoTab'
          this.dialogProps.visible = true
        })
      })
    }
  }
</script>

<style lang="scss" scoped>
  .exercise-info-tab-pane {
    margin-top: 10px;
  }

  .parent-select {
    width: 230px;
  }

  .properties-textarea {
    width: 496px;
  }
</style>
